/*
 * @Author: jian.li 
 * @Date: 2021-10-07 23:09:48 
 * @Last Modified by: jian.li
 * @Last Modified time: 2021-11-02 00:09:03
 * @Descript: 创建对应的路由文件
 */

import * as React from 'react'
import { Image, StyleSheet, StatusBar } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import HomeScreen from '../home'
import FinanceScreen from '../finance'
import TransferScreen from '../transfer'
import LoanScreen from '../loan'
import MimeScreen from '../mime'

const Tab = createBottomTabNavigator()

// icon 需要的数据
const tabIcons = [
  {
    name: '首页', 
    component: HomeScreen,
    defaultIcon: require('./icon/home.png'),
    activeIcon: require('./icon/home-active.png')
  }, {
    name: '理财', 
    component: FinanceScreen,
    defaultIcon: require('./icon/finance.png'),
    activeIcon: require('./icon/finance-active.png')
  }, {
    name: '转账', 
    component: TransferScreen,
    defaultIcon: require('./icon/tranfer.png'),
    activeIcon: require('./icon/tranfer-active.png')
  }, {
    name: '贷款', 
    component: LoanScreen,
    defaultIcon: require('./icon/loan.png'),
    activeIcon: require('./icon/loan-active.png')
  }, {
    name: '我的', 
    component: MimeScreen,
    defaultIcon: require('./icon/mime.png'),
    activeIcon: require('./icon/mime-active.png')
  }
]

export default function App() {
  return (
    <NavigationContainer children={''}>
      <StatusBar  
        animated={true} //指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式：backgroundColor, barStyle和hidden  
        hidden={false}  //是否隐藏状态栏。  
        backgroundColor={'lightblue'} //状态栏的背景色  
        translucent={true} //指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。  
        barStyle={'dark-content'} // enum('default', 'light-content', 'dark-content')   
      >  
      </StatusBar>
      <Tab.Navigator
        tabBarOptions={{
          activeTintColor: '#e91e63'
        }}
      >
        {
          tabIcons && tabIcons.map((item: any, index: number) => (
            <Tab.Screen
              key={index}
              name={item.name}
              component={item.component}
              options={{
                tabBarIcon: ({ focused }) => (
                  focused ? (
                    <Image source={item.activeIcon} style={styles.tabIcon}/>
                  ) : (
                    <Image source={item.defaultIcon} style={styles.tabIcon}/>
                  )
                )
              }}
            />
          ))
        }
      </Tab.Navigator>
    </NavigationContainer>
  )
}

const styles = StyleSheet.create({
  tabIcon: {
    width: 20,
    height: 20
  }
})